<template>
	<view class="u-page">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form :model="userForm" ref="form1">
			<u-form-item label="用户" prop="name" borderBottom required>
				<u--input type="text" v-model="userForm.name" border="none" placeholder="请输入用户" clearable></u--input>
			</u-form-item>
			<u-form-item label="密码" prop="password" borderBottom required>
				<u--input type="password" v-model="userForm.password" border="none" placeholder="请输入密码" clearable></u--input>
			</u-form-item>

			<u-form-item label="确认" prop="password2" borderBottom required>
				<u--input type="password" v-model="userForm.password2" border="none" placeholder="请确认密码" clearable></u--input>
			</u-form-item>

			<u-form-item label="邮箱" prop="email" borderBottom required>
				<u--input type="text" v-model="userForm.email" border="none" placeholder="请输入邮箱" clearable></u--input>
			</u-form-item>

			<u-form-item label="电话" prop="phone" borderBottom required>
				<u--input type="text" v-model="userForm.phone" border="none" placeholder="请输入电话" clearable></u--input>
			</u-form-item>

			<u-form-item label="性别" prop="gender" borderBottom>
				<u-radio-group v-model="userForm.gender" placement="row">
					<u-radio :name="1">男</u-radio>
					<u-radio :name="0" style="margin-left: 10px;">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="昵称" borderBottom><u--input type="text" placeholder="请输入昵称" v-model="userForm.nick_name" border="none"></u--input></u-form-item>
			<u-form-item label="头像">
				<u-upload name="avatar" :fileList="avatarList" :maxCount="1" @afterRead="afterRead" @delete="deletePic"/>
			</u-form-item>
		</u--form>
		<u-button type="primary" text="提交" @click="onSubmit"></u-button>
		<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="onReset"></u-button>

		<u-gap height="20"></u-gap>
		<div>注册成功后的用户可用于登录</div>
	</view>
</template>

<script>
import * as UserAPI from '@/api/user.js';
import { setStorageUser } from '@/utils/storage.js';
export default {
	data() {
		return {
			userForm: {
				//表单中的字段名与数据库中用户表的字段名要求一致
				name: '',
				password: '',
				password2: '',
				email: 'wattt@163.com',
				phone: '15958880000',
				gender: 1,
				avatar: '',
				nick_name: ''
			},
			avatarList: [],

			rules: {
				name: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},
				password2: {
					type: 'string',
					required: true,
					pattern: /^[a-z0-9]{3,12}$/i,
					message: '3-12字符',
					trigger: ['blur', 'change']
				},
				email: {
					type: 'email',
					required: true,
					message: '无效的邮箱地址',
					trigger: ['blur', 'change']
				},
				phone: {
					type: 'string',
					required: true,
					pattern: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
					message: '无效的手机号码',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onReady() {
		// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
		this.$refs.form1.setRules(this.rules);
	},

	methods: {
		// 删除图片
		deletePic(event) {
			console.log(event)
			this.avatarList = []; //已上传的文件如何删除？
		},
		// 新增图片
		afterRead({file}) {
			console.log(file)
			
			UserAPI.uploadAvatar(file).then(result => {
				console.log(result)
				//重新生成显示的图片url
				this.avatarList = [];
				this.avatarList.push({
					url: this.$fullUrl(result.url)
				});
				//设置用户表中的字段值
				this.userForm.avatar = result.url;
			});
		},

		//处理提交保存
		onSubmit() {
			if (this.userForm.password != this.userForm.password2) {
				uni.$u.toast('密码两次输入不一致');
				return;
			}
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1
				.validate()
				.then(valid => {
					if (valid) {
						//注意传递过去的参数user的属性名
						let user = this.userForm;
						delete user.password2; //删除该临时的字段
						UserAPI.register(user).then(result => {
							//保存用户信息（id,name） 注意：还是处于未登录
							setStorageUser(result.data.user);
							uni.reLaunch({
								url: "/pages/user/User",
							})
						});
					}
				})
				.catch(() => {
					uni.$u.toast('校验失败');
				});		
		},

		onReset() {
			this.$refs.form1.resetFields();
			setTimeout(() => {
				this.$refs.form1.clearValidate();
			}, 10);
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
